<template>
  <div>
    <h1>动态组件</h1>
    <!-- <Dynamic-one></Dynamic-one>
    <Dynamic-two></Dynamic-two>
    <Dynamic-three></Dynamic-three> -->
    
    <button @click="toggle">切换</button>
    <keep-alive :include="['DynOne']">
        <component :is="comName"></component>
    </keep-alive>
    <!-- <component :is="comName"></component> 是决定哪一个组件可以被渲染 -->
    <!-- 被keep-alive包裹的组件或路由视图会进行缓存组件，或页面实例，而不会被销毁 -->
    <!-- include 可以写入字符串或正则
    只有名称匹配的才会被缓存
    exclude
    只有名称匹配的不会被缓存
    max
    最大缓存数量
     -->
  </div>
</template>

<script>
import DynamicOne from "../components/DynamicOne.vue";
import DynamicTwo from "../components/DynamicTwo.vue";
import DynamicThree from "../components/DynamicThree.vue";

export default {
  data() {
    return {
      comName: DynamicOne,
      comList: ["DynamicOne", "DynamicTwo", "DynamicThree"],
      current: 0,
    };
  },
  methods: {
    toggle() {
      this.current++;
      if (this.current > 2) {
        this.current = 0;
      }
      this.comName = this.comList[this.current];
    },
  },
  components: {
    DynamicOne,
    DynamicTwo,
    DynamicThree,
  },
 
};
</script>

<style>
</style>